<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Untitled Document</title>
		<link rel="stylesheet" type="text/css" href="style/css.css" />
		<script>
			/*
				参数：
					id 要绑定单击事件的按钮的id
					callback 事件的响应函数
			 */
			function myClick(id, callback){
				var btn = document.getElementById(id);
				btn.onclick = callback;
			}

			window.onload = function () {

				//创建广州节点
				var gz = document.createElement('li');
				var txt = document.createTextNode('广州');
				gz.appendChild(txt);

				// 创建一个"广州"节点,添加到#city下
				myClick('btn01',function () {
					// <li>广州</li>
					// 创建一个li元素节点对象
					// document.createElement() 用来根据标签名创建一个元素节点对象
					// var gz = document.createElement('li');

					// 创建一个"广州"文本节点对象
					// document.createTextNode() 用来根据一个文本内容创建一个文本节点对象
					// var txt = document.createTextNode('广州');

					// 将txt设置为gz的子节点
					// 父节点.appendChild(子节点) 将一个节点设置为另一个节点的子节点
					// gz.appendChild(txt);

					// 获取id为city的元素
					var city = document.getElementById('city');

					// 将gz添加到city中
					city.appendChild(gz);

				});


				// 将"广州"节点插入到#bj前面
				myClick('btn02',function () {
					//获取bj节点
					var bj = document.getElementById('bj');

					var gz = document.createElement('li');
					var txt = document.createTextNode('广州');
					gz.appendChild(txt);

					/*
						父节点.insertBefore(前边的节点, 后边的节点)
							- 用来将一个节点插入到指定节点前边
					 */
					// 获取id为city的元素
					var city = document.getElementById('city');

					city.insertBefore(gz, bj);


				});
				// 使用"广州"节点替换#bj节点
				myClick('btn03',function () {
					//获取bj节点
					var bj = document.getElementById('bj');

					//创建广州节点
					var gz = document.createElement('li');
					var txt = document.createTextNode('广州');
					gz.appendChild(txt);

					//获取id为city的元素
					var city = document.getElementById('city');

					/*
						父节点.replaceChild(新节点, 旧节点)
							- 使用一个新的节点替换旧节点
					 */
					city.replaceChild(gz, bj);

				});
				// 删除#bj节点
				myClick('btn04',function () {
					// 获取id为bj的元素
					var bj = document.getElementById('bj');
					// 获取id为city的元素
					var city = document.getElementById('city')

					// 父节点.removeChild(子节点)
					// city.removeChild(bj);

					// 子节点.parentNode.removeChild(子节点)
					bj.parentNode.removeChild(bj);

				});

				// 读取#city内的HTML代码
				myClick('btn05',function () {
					var city = document.getElementById('city');
					alert(city.innerHTML);
				});

				// 设置#bj内的HTML代码
				myClick('btn06',function () {
					var bj = document.getElementById('bj');
					bj.innerHTML = '深圳';
				});

				// 创建一个"广州"节点,添加到#city下
				myClick('btn07',function () {
					// 获取city
					var city = document.getElementById('city');
					// 修改city的innerHTML
					// city.innerHTML += '<li>广州</li>';

					// 创建一个li元素
					var gz = document.createElement('li');
					// 设置gz中的文本内容
					gz.innerHTML = '广州';
					// 将li设置city的子节点
					city.appendChild(gz);
				});

				//为bj绑定一个单击响应函数
				var bj = document.getElementById('bj');
				bj.onclick = function () {
					alert(123);
				};
			};

		</script>
	</head>
	<body>
		<div id="total">
			<div class="inner">
				<p>
					你喜欢哪个城市?
				</p>

				<ul id="city">
					<li id="bj">北京</li>
					<li>上海</li>
					<li>东京</li>
					<li>首尔</li>
				</ul>
				
			</div>
		</div>
		<div id="btnList">
			<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
			<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
			<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
			<div><button id="btn04">删除#bj节点</button></div>
			<div><button id="btn05">读取#city内的HTML代码</button></div>
			<div><button id="btn06">设置#bj内的HTML代码</button></div>
			<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
		</div>
	</body>
</html>
